<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>库存预警（滞销）</h2>
    </div> -->
    <!-- 搜索 -->
    <!-- <div class="select_form_box mb16">
      <div class="filter-container">
        <el-select v-model.trim="searchParam.searchType" clearable placeholder="编码或名称" class="input-with-select mr64">
          <el-option v-for="item in searchTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model.trim="searchParam.search" placeholder="关键字回车搜索" class="input-with-select mr16" @keyup.enter.native="getList" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <div v-action="'salesWarning@unsalableExport'" class="operation_button_box">
      <el-button size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'salesWarning@unsalableExport'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
          重置
        </el-button>
        <el-button @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit :row-class-name="tableRowClassName" :max-height="screenHeigh">
        <!-- <el-table-column key="selection" type="selection" width="51" align="center"/> -->
        <el-table-column key="entity_warehouse" label="实体仓库" prop="entity_warehouse" align="center" width="180" />
        <el-table-column key="virtual_warehouse" label="库存所属方" prop="virtual_warehouse" align="center" width="180" />
        <el-table-column key="goods_code" label="系统sku" prop="goods_code" align="center" width="240">
          <template slot-scope="scope">
            <code-item :code="scope.row.goods_code" @click="toInfo(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column key="goods_name_ch" label="中文名称" prop="goods_name_ch" align="center" width="220" />
        <el-table-column key="category_name" label="商品分类" prop="category_name" align="center" width="163" show-overflow-tooltip />
        <!-- <el-table-column v-if="!roles.includes('operator')" key="purchase_price_rmb" label="采购单价（RMB）" prop="purchase_price_rmb" align="center" width="126" />
        <el-table-column v-if="!roles.includes('operator')" key="purchase_price_usd" label="采购单价（USD）" prop="purchase_price_usd" align="center" width="119" />
        <el-table-column v-if="!roles.includes('operator')" key="amount" label="采购总价" prop="amount" align="center" width="119" /> -->
        <!-- <el-table-column key="shippfee" label="海运费" prop="shippfee" align="center" width="81" /> -->
        <!-- <el-table-column key="tax_fee" label="总关税" prop="tax_fee" align="center" width="81" /> -->
        <!-- <el-table-column key="supply" label="供应商" prop="supply" align="center" width="100" /> -->
        <el-table-column key="volume" label="总体积" prop="volume" align="center" width="120" />
        <el-table-column key="number" label="即时库存" prop="number" align="center" width="81" />
        <el-table-column key="age" label="库存账龄" align="center" width="690">
          <el-table-column v-for="item in stockAgeList" :key="item.id" :label="item.label" :prop="item.prop" align="center" width="98" />
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="销量预警（补货）导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import codeItem from '../../../components/base/code'
import cacheList from '@/layout/mixin/cacheList'
import { mapGetters } from 'vuex'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import { downloadxlsx } from '@/utils/index'
import formOperate from '@/layout/mixin/formOperate'
import DownModul from '@/components/DownModul/index.vue'
import FormSelections from '@/components/FormSelection'
import { getEntityWarehouseList } from '@/utils/publicData.js'
export default {
  name: 'SalesWarningUnsalable',
  components: { DownModul, FormSelections, codeItem },
  directives: {
    action
  },
  mixins: [cacheList, formOperate],
  data() {
    return {
      otherHeight: 355,
      queryParam: {},
      screenHeigh: document.body.clientHeight - 150,
      componentName: 'SalesWarningUnsalable',
      url: '/sales-warning/unsalable',
      exportUrl: '/sales-warning/unsalable-export',
      formItems: [
        {
          label: '系统sku',
          key: 'code',
          type: 'input',
          placeholder: '请输入系统sku'
        },
        {
          label: '中文名',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名'
        },
        {
          label: '英文名',
          key: 'name_en',
          type: 'input',
          placeholder: '请输入英文名'
        },
        {
          label: '虚拟仓库名称',
          key: 'warehouse',
          type: 'input',
          placeholder: '请输入仓库名称'
        },
        {
          label: '实体仓库',
          key: 'warehouseId',
          type: 'select',
          placeholder: '请选择实体仓库',
          options: []
        }
      ],
      stockAgeList: [
        {
          id: 0,
          label: '0-30天',
          prop: 'one_months'
        },
        {
          id: 1,
          label: '31-60天',
          prop: 'two_months'
        },
        {
          id: 2,
          label: '61-90天',
          prop: 'three_months'
        },
        {
          id: 3,
          label: '91-120天',
          prop: 'four_months'
        },
        {
          id: 4,
          label: '121-150天',
          prop: 'five_months'
        },
        {
          id: 5,
          label: '151-360天',
          prop: 'one_year'
        },
        {
          id: 6,
          label: '1年-2年',
          prop: 'two_year'
        },
        {
          id: 7,
          label: '2年以上',
          prop: 'three_year'
        }
      ],
      cachePaths: [
        '/storage/salesWarningUnsalable/info'
      ],
      optionsModul: [],
      WarehouseList: []
    }
  },
  computed: {
    ...mapGetters(['roles'])
    // 请求参数
    // queryParam({ page, limit }) {
    //   const vm = this
    //   const params = {
    //     page,
    //     limit
    //   }
    //   if (vm.searchParam.searchType) {
    //     const item = vm.searchTypeList.find(
    //       (e) => e.id === vm.searchParam.searchType
    //     )
    //     params[item.key] = vm.searchParam.search
    //   }
    //   return params
    // }
  },
  activated() {
    this.getList()
    getEntityWarehouseList().then((data) => {
      this.WarehouseList = data
      this.formItems[4].options = data.map((arr) => {
        arr.label = arr.name
        arr.value = arr.id
        return arr
      })
    })
  },
  created() {
    const vm = this
    vm.getList() // 获取列表数据
    getEntityWarehouseList().then((data) => {
      this.WarehouseList = data
      this.formItems[4].options = data.map((arr) => {
        arr.label = arr.name
        arr.value = arr.id
        return arr
      })
    })
  },
  methods: {
    // 导出
    // handleExport() {
    //   const vm = this
    //   const { code, name_ch, name_en } = vm.queryParam
    //   const params = { code, name_ch, name_en }
    //   //   vm.handleExportxlsx(vm.exportUrl, { params })
    //   vm.downLoadParams = params
    //   vm.formVisibleDown = true
    // },
    // 导出
    handleExport() {
      const vm = this
      vm.exportLoading = true
      //   const { searchType, search } = vm.searchParam
      //   if (searchType) {
      //     const item = vm.searchTypeList.find(
      //       (e) => e.id === vm.searchParam.searchType
      //     )
      //     params[item.key] = search
      //   }
      const { code, name_ch, name_en } = vm.queryParam
      const params = { code, name_ch, name_en }
      vm.$http.post('/sales-warning/unsalable-export', params).then(res => {
        downloadxlsx(res.data)
        vm.exportLoading = false
      }).catch(() => {
        vm.exportLoading = false
      })
    },
    // 详情页面
    toInfo(row) {
      const vm = this
      vm.$router.push({ path: '/storage/salesWarningUnsalable/info', query: { code: row.goods_code, virtual_warehouse_id: row.virtual_warehouse_id }})
    }
  }
}
</script>

<style lang="scss" scoped></style>
